<template>
  <div class="bar">
    <el-row class="tac">
      <el-col :span="24">
        <el-menu
          default-active="0"
          background-color="rgb(27,38,55)"
          text-color="white"
          :router=router
        >
          <el-menu-item v-for="item in list" :key="item.id" :index="item.index">
            <el-icon><component :is="item.icon"></component></el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
export default defineComponent({
  setup() {
    const arrowRight: string = "ArrowRightBold";
    const arrowDown: string = "ArrowDownBold";
    const list: Array<{
      id: number;
      index: string;
      name: string;
      icon: string;
    }> =reactive ([
      {
        id: 1,
        index: "0",
        name: "首页",
        icon: "House",
      },
      {
        id: 2,
        index: "1",
        name: "机构管理",
        icon: "Stamp",
      },
      {
        id: 3,
        index: "2",
        name: "信息管理",
        icon: "Document",
      },
      {
        id: 4,
        index: "3",
        name: "商机管理",
        icon: "Wallet",
      },
      {
        id: 5,
        index: "4",
        name: "产品管理",
        icon: "Box",
      },
      {
        id: 6,
        index: "5",
        name: "合同管理",
        icon: "List",
      },
      {
        id: 7,
        index: "6",
        name: "日志管理",
        icon: "Memo",
      },
      {
        id: 8,
        index: "7",
        name: "预约管理",
        icon: "Memo",
      },
      {
        id: 9,
        index: "8",
        name: "售后日志",
        icon: "Memo",
      },
      {
        id: 10,
        index: "9",
        name: "任务清单",
        icon: "Memo",
      },
      {
        id: 11,
        index: "10",
        name: "员工管理",
        icon: "Memo",
      },
      {
        id: 12,
        index: "11",
        name: "资料库管理",
        icon: "Memo",
      },
      {
        id: 13,
        index: "12",
        name: "系统对接管理",
        icon: "Memo",
      },
      {
        id: 14,
        index: "13",
        name: "统计分析",
        icon: "Memo",
      },
      {
        id: 15,
        index: "/user",
        name: "用户管理",
        icon: "Memo",
      },
      {
        id: 16,
        index: "/SystemConfig",
        name: "系统配置",
        icon: "Memo",
      },
      {
        id: 17,
        index: "/SystemLog",
        name: "系统日志",
        icon: "Memo",
      },
      {
        id: 18,
        index: "17",
        name: "安全退出",
        icon: "Memo",
      },
    ]);
    const router:boolean=true

    return {
      list,
      arrowRight,
      arrowDown,
      router
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.bar {
  width: 200px;
  height: 1000px;
  background-color: rgb(27, 38, 55);
  float: left;
}
.bar-item {
  height: 50px;
  width: 100%;
  line-height: 50px;
}
</style>
